<template>
    <div class="fullPage">
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.name}}</span> / <span>{{ui.title.localName}}</span>
            </div>
            <div class="filter">
                <div class="lstItems">
                    <div class="item">
                        <el-select  size="small" clearable  v-model="filter.delegation.delegationId" placeholder="请选择代表团" @change="onChangeDelegation">
                            <el-option
                                v-for="(delegation, delegationIndex) in filter.delegation.items"
                                :key="delegationIndex"
                                :label="delegation.localName"
                                :value="delegation.delegationId"
                            >
                                <span style="float: left">{{ delegation.localName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ delegation.name }}</span>
                            </el-option>
                        </el-select>
                    </div>
                    <div class="item">
                          <el-input
                            placeholder="请输入内容"
                            clearable
                            size="small"
                            v-model="filter.searchText">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div>
        <div class="pageBody">
            <el-table
                :data="rowDatas"
                style="width: 100%"
                :height="ui.tabHeight"
                v-loading="ui.loading"
            >
<el-table-column
	prop="delegationCode"
	label="delegationCode"
></el-table-column>
<el-table-column
	prop="delegationName"
	label="delegationName"
></el-table-column>
<el-table-column
	prop="delegationLocalName"
	label="delegation"
></el-table-column>
<el-table-column
	prop="code"
	label="code"
></el-table-column>
<el-table-column
	prop="bIBCODE"
	label="bIBCODE"
></el-table-column>
<el-table-column
	prop="gender"
	label="gender"
></el-table-column>
<el-table-column
	prop="name"
	label="name"
></el-table-column>
<el-table-column
	prop="localName"
	label="localName"
></el-table-column>
<el-table-column
	prop="shortName"
	label="shortName"
></el-table-column>
<el-table-column
	prop="localShortName"
	label="localShortName"
></el-table-column>
                <el-table-column
                    fixed="right"
                    label="Action"
                    width="80">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="showDlg(scope.row)"
                        type="text" >
                            <i class="fa fa-edit"></i> edit
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            :title="ui.title.name + ' / '+ ui.title.localName"
            :visible.sync="dlg.show"
            width="800px"
            >

                <div class="formEditPan">

                    <el-row :gutter="10">
                        <el-col
                            :span="12"
                            v-for="(col , colInd) in ui.tabCols"
                            :key="colInd"
                        >
                            <div
                                class="editRow"
                            >
                                <div class="lab" style="width:130px">{{col}}</div>
                                <div class="edit">
                                    <el-input v-model="dlg.info[col]"></el-input>
                                </div>
                            </div>
                        </el-col>
                    </el-row>

                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  mounted () {
    var me = this
    try {
      me.$nextTick().then(_ => {
        return me.init()
      }).then(_ => {
        me.refresh()
      })
    } catch (er) {
      console.log(er)
    }
  },
  data () {
    return {
      sqls: {
        path: 'squ/reg/athlete/',
        delegation: '',
        countryOrRegion: '',
        getItems: '',
        new: '',
        update: ''
      },
      ui: {
        title: {
          icon: 'fa fa-users',
          name: 'Athlete',
          localName: '运动员'
        },
        tabHeight: 200,
        loading: false
      },
      filter: {
        delegation: {
          enable: false,
          items: [],
          delegationId: null
        },
        searchText: '',
        modifyFlag: false
      },
      dlg: {
        show: false,
        info: {}
      },
      rowDatas: [],
      dicts: {
        delegations: [],
        countryOrRegions: []
      }
    }
  },
  methods: {
    init () {
      return new Promise((success, faild) => {
        var me = this
        try {
          var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight
          me.ui.tabHeight = h
          me.sqls.delegation = me.sqls.path + 'delegations'
          me.sqls.countryOrRegion = me.sqls.path + 'countryOrRegion'
          me.sqls.getItems = me.sqls.path + 'getItems'
          me.sqls.new = me.sqls.path + 'new'
          me.sqls.update = me.sqls.path + 'update'
          me.sys.query(me.sqls.delegation, {}).then(res => {
            me.filter.delegation.items = res
            me.dicts.delegations.items = res
            me.sys.query(me.sqls.countryOrRegion, {}).then(res => {
              me.dicts.countryOrRegions = res
              success()
            })
          })
        } catch (er) {
          console.log(er)
          success()
        }
      })
    },
    refresh () {
      var me = this
      try {
        var ps = {
          delegationId: me.filter.delegation.enable ? me.filter.delegation.items[me.filter.delegation.index].delegationId : 0,
          searchText: me.filter.searchText,
          modify: me.filter.modifyFlag
        }
        var key = me.sqls.getItems
        me.ui.loading = true
        me.sys.query(key, ps).then(res => {
          me.ui.loading = false
          me.rowDatas = res
        })
      } catch (er) {
        console.log(er)
      }
    },
    showDlg (rowData) {
      var me = this
      try {
        me.dlg.info = rowData && rowData != null && rowData.delegationId > 0 ? rowData : {
          athleteId: 0,
          bIBCODE: '',
          birthCountry: '',
          birthDay: '',
          birthPlace: '',
          blood: '',
          code: '',
          delegationEXID: '',
          delegationID: '',
          familyName: '',
          gender: 'W',
          givenName: '',
          iFCode: '',
          localFamilyName: '',
          localGivenName: '',
          localName: '',
          localPrintName: '',
          localShortName: '',
          localTVName: '',
          modificationIndicator: '',
          name: '',
          nation: '',
          nationalityID: '',
          passportFamilyName: '',
          passportGivenName: '',
          printinitialName: '',
          printName: '',
          residenceCountry: '',
          residencePlace: '',
          shortName: '',
          tVinitialName: '',
          tVName: ''
        }
        me.dlg.show = true
      } catch (er) {
        console.log(er)
      }
    },
    save () {
      var me = this
      try {

      } catch (er) {
        console.log(er)
      }
    },
    delete () {
      var me = this
      try {

      } catch (er) {
        console.log(er)
      }
    },
    onChangeSwitchDelegation (ev) {
      var me = this
      try {

      } catch (er) {
        console.log(er)
      }
    },
    onChangeDelegation (ev) {
      var me = this
      try {

      } catch (er) {
        console.log(er)
      }
    }
  }

}
</script>

<style lang="less" scoped>
    @import url('../module.less');

</style>
